<template>
  <ElButton v-if="utils.checkAuth('useradminadd')" @click="(dialogData.model = true), (dialogData.type = 'add')">添加用户</ElButton>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="280" />
    <el-table-column prop="user_name" label="账号" />
    <el-table-column prop="nickname" label="昵称" />
    <el-table-column prop="phone" label="电话" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column label="角色">
      <template #default="scope">
        <el-tag type="primary">{{ scope.row.role_name }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="状态">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.status==0">正常</el-tag>
        <el-tag type="danger" v-else>禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="danger" @click="(dialogFormVisible = true),(delData.id = scope.row.id),(delData.password = '')" v-show="utils.checkAuth('editpassword')">修改密码</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small"
          @click="(dialogData.model = true), (dialogData.type = 'edit'), (dialogData.id = scope.row.id)" v-show="utils.checkAuth('useradminedit')">编辑</el-button>
        <el-button size="small" type="danger" @click="del(scope.row.id)" v-show="utils.checkAuth('useradmindel')" >删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <!-- 编辑添加组件 -->
  <el-dialog v-model="dialogData.model" :title="dialogData.type == 'add' ? '添加用户' : '编辑用户'" width="800">
    <addUser @item="close" :id="dialogData.id" :type="dialogData.type"></addUser>
  </el-dialog>
  <!-- 修改密码 -->
  <el-dialog v-model="dialogFormVisible"  title="修改密码" width="500">
    <el-form :model="form">
      <el-form-item label="新密码" :label-width="formLabelWidth">
        <el-input v-model="delData.password" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="EditPwd">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { AccountList, AccountDel ,EditPassWord} from '../../api/api';
import { ElButton } from "element-plus";
import { ElMessageBox, ElMessage } from 'element-plus'
import addUser from "./addUser.vue"
import { utils } from "@/api/utils.js";
const dialogData = ref({
  model: false,
  type: 'add',
  id: ''
})
const tableData = ref([])
const dialogFormVisible=  ref(false)
const delData = ref({
  id:'',
  password:''
})
onMounted(() => {
  loadList();
});
const loadList = () => {
  try {
    // 这里应该是发送登录请求的代码，例如使用axios或者其他HTTP客户端
    AccountList({}).then((res) => {
      console.log('res', res)
      tableData.value = res.data

    })

  } catch (error) {
    // 处理登录失败的情况
    console.error('error', error);
    // 可以在这里提示用户登录失败的信息
  }
};
const close = () => {
  dialogData.value = { model: false }
  loadList();
}
const EditPwd = () =>{
  EditPassWord(delData.value).then((res) => {
    console.log(res)
    
    dialogFormVisible.value = false
  })
  
}

//删除
const del = (id) => {
  console.log(id)
  ElMessageBox.confirm(
    '确定删除用户吗?',
    '操作',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(123)
       AccountDel({id:id}).then((res) => {
        console.log('res', res)
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        loadList();

      })

    })
    .catch(() => {  
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}


</script>
